<form nz-form [formGroup]="validateForm" *ngIf="flowRecordOutput.canOperation">
  <nz-spin [nzSpinning]="isPending" [nzTip]="'正在执行操作...'">
    <table style="text-align: center;align-content: center;width:1024px;margin: auto;">
      <ng-container *ngFor="let tableRow of arTableFormControls">
        <tr>
          <ng-container *ngFor="let formCol of tableRow">
            <td *ngIf="formCol.labelRowindex" [attr.rowspan]="formCol.labelRowSpan" [attr.colspan]="formCol.labelColSpan!=0?formCol.labelColSpan:8"
              style="text-align: center;word-break: break-all;">
              <!-- 标题 -->
              <span style="color: red;" ng-if="formCol.isRequired">*</span> {{formCol.fieldCaption}}
            </td>
            <td *ngIf="formCol.inputRowindex" [attr.rowspan]="formCol.InputRowSpan" [attr.colspan]="formCol.inputColSpan!=0?formCol.inputColSpan:16">
              <nz-form-item>
                <ng-container>
                  <nz-form-control nz-col nzHasFeedback [ngSwitch]="formCol.fieldType">
                    <!-- 文本框 -->
                    <input nz-input *ngSwitchCase="0" [formControlName]="formCol.fieldName" [id]="formCol.fieldName" />
                    <!-- 多行文本 -->
                    <input nz-input *ngSwitchCase="2" nzType="textarea" nzRows="5" [formControlName]="formCol.fieldName" [id]="formCol.fieldName"
                    />
                    <!-- 多选框 -->
                    <nz-checkbox-group *ngSwitchCase="3" [formControlName]="formCol.fieldName">
                      <label nz-radio-button *ngFor="let option of formCol.fieldData" [nzValue]="option.dValue">
                        <span>{{option.caption}}</span>
                      </label>
                    </nz-checkbox-group>
                    <!-- radio -->
                    <nz-radio-group *ngSwitchCase="4" [formControlName]="formCol.fieldName">
                      <label nz-radio-button *ngFor="let option of formCol.fieldData" [nzValue]="option.dValue">
                        <span>{{option.caption}}</span>
                      </label>
                    </nz-radio-group>
                    <!-- select 加载全部 -->
                    <ng-container *ngSwitchCase="5">
                      <nz-select *ngIf="formCol.loadRemoteDataType==0" [nzPlaceHolder]="'请选择'+ formCol.fieldCaption" [formControlName]="formCol.fieldName"
                        nzAllowClear>
                        <nz-option *ngFor="let option of formCol.fieldData" [nzLabel]="option.caption" [nzValue]="option.dValue">
                        </nz-option>
                      </nz-select>
                      <nz-select *ngIf="formCol.loadRemoteDataType==1" nzAllowClear [nzPlaceHolder]="'根据填入内容搜索'" [formControlName]="formCol.fieldName"
                        (nzSearchChange)="searchChange($event,1,formCol.fieldName)" [nzNotFoundContent]="'无法找到'" nzShowSearch>
                        <nz-option *ngFor="let option of formCol.fieldData" [nzLabel]="option.caption" [nzValue]="option.dValue">
                        </nz-option>
                      </nz-select>
                    </ng-container>
                    <!-- 头像 -->
                    <nz-upload *ngSwitchCase="10" class="avatar-uploader" [nzName]="formCol.fieldName" [nzShowUploadList]="false" [nzBeforeUpload]="beforeImgUpload"
                      [nzCustomRequest]="bindingForm">
                      <i *ngIf="!focusEntity[formCol.fieldName]" class="anticon anticon-plus avatar-uploader-trigger"></i>
                      <img *ngIf="focusEntity[formCol.fieldName]" class="avatar" [src]="(isHaveImage(formCol.fieldName)?httpService.IP_PORT:'')+focusEntity[formCol.fieldName]">
                    </nz-upload>
                    <!-- 文件上传 -->
                    <nz-upload *ngSwitchCase="11" [(nzFileList)]="fileList[formCol.fieldName]" [nzName]="formCol.fieldName" [nzBeforeUpload]="beforeUpload"
                      [nzCustomRequest]="bindingFormFile" (nzChange)="handleChange($event,formCol.fieldName)" [nzLimit]="1">
                      <button nz-button>
                        <i class="anticon anticon-upload"></i>
                        <span>选择文件</span>
                      </button>
                    </nz-upload>
                    <!-- 数字 -->
                    <nz-input-number *ngSwitchCase="6" [nzStep]="1" [formControlName]="formCol.fieldName"></nz-input-number>
                    <!-- toggle -->
                    <nz-switch *ngSwitchCase="7" nzCheckedChildren="是" nzUnCheckedChildren="否" [formControlName]="formCol.fieldName">
                    </nz-switch>
                    <!-- Datetime -->
                    <nz-date-picker *ngSwitchCase="8" [formControlName]="formCol.fieldName"></nz-date-picker>
                    <!-- 验证内容 -->
                    <nz-form-explain style="color: red;" *ngIf="validateForm.controls[formCol.fieldName].dirty&&validateForm.controls[formCol.fieldName].errors">
                      <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError('required')">
                        {{formCol.fieldCaption}}为必填项.
                      </ng-container>
                      <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError('maxlength')">
                        {{formCol.fieldCaption}}的最大长度{{formCol.maxLength}}.
                      </ng-container>
                      <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError('minlength')">
                        {{formCol.fieldCaption}}的最小长度{{formCol.minLength}}.
                      </ng-container>
                      <ng-container *ngIf="validateForm.controls[formCol.fieldName].hasError(formCol.fieldName)">
                        内容已经存在.
                      </ng-container>
                    </nz-form-explain>
                  </nz-form-control>
                </ng-container>
              </nz-form-item>
            </td>
          </ng-container>
        </tr>
      </ng-container>
      <tr>
        <td colspan="24">
          <ng-container *ngIf=" flowRecordOutput.currentHandleType==0">
            <nz-form-item nz-row>
              <nz-form-control nz-col>
                <button nz-button [disabled]="!flowRecordOutput.canOperation" class="login-form-button" [nzType]="'primary'" (click)="addEntity(6)">提交</button>
              </nz-form-control>
            </nz-form-item>
          </ng-container>
          <ng-container *ngIf="flowRecordOutput.currentHandleType==1">
            <!-- <div style="margin: 20px;">
                  <p>
                    <b>审批意见</b>
                  </p>
                  <textarea nz-input style="width: 100%;resize: none;" rows="8" formControlName="opinion" formControlName="opinion"></textarea>
                </div>
                <div> -->
            <nz-form-item nz-row>
              <nz-form-control nz-col>
                <button nz-button [disabled]="!flowRecordOutput.canOperation" class="login-form-button" [nzType]="'default'" (click)="addEntity(0)">审批通过</button>
                <button nz-button [disabled]="!flowRecordOutput.canOperation" class="login-form-button" [nzType]="'default'" (click)="addEntity(1)">审批退回</button>
              </nz-form-control>
            </nz-form-item>
            <!-- </div> -->
          </ng-container>
          <ng-container *ngIf="flowRecordOutput.currentHandleType==2">
            <nz-form-item nz-row>
              <nz-form-control nz-col>
                <button nz-button [disabled]="!flowRecordOutput.canOperation" class="login-form-button" [nzType]="'default'" (click)="addEntity(5)">完成</button>
              </nz-form-control>
            </nz-form-item>
          </ng-container>
        </td>
      </tr>
    </table>
  </nz-spin>
</form>
